<template>
  <div class="demo-collapse">
    <h3 class="title">热点问题</h3>
    <div class="menu">
			<li class="item" v-for="item in items" :key="item.id">
				<div @click="change(item.id)" class="btn">{{item.title}}</div>
				<div class="smenu" :class="{active: activeIndex === item.id}">
					<a href="" v-for="(i,index) in item.children" :key="index" >{{i}}</a>
				</div>
			</li>
		</div>
  </div>
</template>
<script setup>
import {collapseItems} from '@/api/constants'
import { ref } from 'vue'
  const items = ref(collapseItems)
  const activeIndex = ref(1)
  const change = (id) => {
    if (activeIndex.value == id) {
      activeIndex.value = 0
    }else {
      activeIndex.value = id
    }
  }
</script>
<style scoped lang="less">
.title {
  font-size: 20px;
  padding: 20px;
}
.menu {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	width: 80%;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
  left: 50%;
  transform: translateX(-50%);
	.item {
		border: 1px solid @mainColor;
		overflow: hidden;
		.btn {
			display: block;
      font-weight: bold;
			padding: 16px 20px;
			background-color: @mainColor;
			color: #fff;
			position: relative;
			&::before {
				content: "";
				position: absolute;
				left: 20px;
				bottom: -7px;
				background-color: @mainColor;
				transform: rotate(-45deg);
				width: 14px;
				height: 14px;
			}
		}
		.smenu {
			background-color: #fff;
			overflow: hidden;
			max-height: 0;
			transition: max-height 0.5s;
			a {
				display: block;
				padding: 12px 26px;
				position: relative;
        cursor: pointer;
				&::before {
					content: "";
					width: 10px;
					height: 100%;
					position: absolute;
					background-color: @mainColor;
					left: 0;
					top: 0;
					transition: .5s;
					opacity: 0;
				}
				&:hover::before {
					opacity: 1;
				}
			}
		}
    .active {
			max-height: 30em;
    }
	}
}
</style>